import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux, Link } from 'dva/router';
import querystring from 'querystring';
import {
  Form,
  Input,
  Card,
  message,
  Button,
  Spin,
  Radio,
} from 'antd';

import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import CustomerList from '../../../components/Falcon/CustomerList';

import styles from './style.less';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ risk }) => ({
  risk,
}))
@Form.create()
export default class AlonePreCheckDetails extends PureComponent {
  state = {
    projectId: '',
    type: null,
  };
  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    this.setState({
      projectId: params.id,
      type: params.type
    });
    dispatch({
      type: 'risk/showScreen',
      payload: {
        projectId: params.id,
      },
    });

    window.addEventListener('resize', this.resizeFooterToolbar);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeFooterToolbar);
  }

  handleCommitScree = code => {
    const { dispatch } = this.props;
    const { validateFieldsAndScroll } = this.props.form;
    let result = null;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        if (values.resultCode == 1) {
          result = '正常';
        }
        if (values.resultCode == 2) {
          result = '关注';
        }
        if (values.resultCode == 3) {
          result = '建议禁入';
        }
        dispatch({
          type: 'risk/commitScreen2',
          payload: {
            projectId: this.state.projectId,
            content: values.content,
            result: result,
            resultCode: code,
          },

          callback: () => {
            const { risk: { riskResult } } = this.props;
            if (riskResult.code == 200) {
              message.success('提交成功');
              dispatch(routerRedux.push('/risk/alonePreCheckList'));
            } else {
              message.error(riskResult.message);
            }
          },
        });
      }
    });
  };

  render() {
    const { risk: { riskScreenDetails, riskLoading, riskHomeVisitLoading } } = this.props;
    const assetType = riskScreenDetails && riskScreenDetails.assetType == 1 ? '新车' : '二手车';
    const productContent = riskScreenDetails && riskScreenDetails.productName + `(${assetType})`;
    const { getFieldDecorator } = this.props.form;

    return (
      <PageHeaderLayout title="业务初筛" content={`所选产品：${productContent}`}>
        {riskLoading ? (
          <div className={styles.spinContainer}>
            <Spin size="large" />
          </div>
        ) : (
            <div>
              <CustomerList
                projectId={this.state.projectId}
                hindBusinessState={true}
                hideDocuments={false}
                hideThirdVerify={false}
                authorizedSignatureState={true} //是否显示授权书和签字照
                thirdPartyQuery={true} //只有业务初筛进去才能查询反欺诈和人行征信，其它只能看
              />
              {this.state.type == 0 ?
                <Card className={styles.preCheckFormCard}>
                  <Form className={styles.preCheckForm}>
                    <FormItem label="初筛意见" {...formItemLayout}>
                      {getFieldDecorator('resultCode', {
                      })(
                        <RadioGroup>
                          <Radio value={1}>正常</Radio>
                          <Radio value={2}>关注</Radio>
                          <Radio value={3}>建议禁入</Radio>
                        </RadioGroup>
                      )}
                    </FormItem>
                    <FormItem label="意见说明" {...formItemLayout}>
                      {getFieldDecorator('content', {
                      })(<TextArea rows={4} placeholder="请输入意见说明" />)}
                    </FormItem>
                    <FormItem
                      wrapperCol={{
                        xs: { span: 24, offset: 0 },
                        sm: {
                          span: formItemLayout.wrapperCol.span,
                          offset: formItemLayout.labelCol.span,
                        },
                      }}
                      label="">
                      <Button
                        type="primary"
                        onClick={() => this.handleCommitScree(1)}
                        loading={riskHomeVisitLoading}>
                        提交
                      </Button>
                      <Button style={{ marginLeft: '30px' }}>
                        <Link to="/risk/alonePreCheckList">返回</Link>
                      </Button>
                    </FormItem>
                  </Form>
                </Card>
                :
                <Card className={styles.preCheckFormCard}>
                  <Button style={{ display: 'block', margin: '0 auto' }}>
                    <Link to="/risk/alonePreCheckList">返回</Link>
                  </Button>
                </Card>
              }
            </div>
          )}
      </PageHeaderLayout>
    );
  }
}
